<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'
const router = useRouter()
const isLogin = ref(false)
const username = ref('')
const realname = ref('')
const avatar = ref('')
const userAvatar = 'https://dummyimage.com/32x32/2d8cf0/fff&text=U'

function checkLogin() {
  isLogin.value = localStorage.getItem('isLogin') === 'true'
  username.value = localStorage.getItem('username') || ''
  realname.value = localStorage.getItem('realname') || username.value
  avatar.value = localStorage.getItem('avatar') || 'https://dummyimage.com/32x32/2d8cf0/fff&text=U'
}

onMounted(checkLogin)
window.addEventListener('storage', checkLogin)

function goLogin() {
  router.push('/login')
}
function goProfile() {
  router.push('/profile') // 你可以自定义“我的”页面路由
}
function handleDropdown(command) {
  if (command === 'profile') {
    router.push('/profile')
  } else if (command === 'settings') {
    router.push('/settings')
  } else if (command === 'logout') {
    localStorage.removeItem('isLogin')
    localStorage.removeItem('username')
    router.push('/login')
  }
}
defineProps({
  searchUser: {
    type: String,
    required: true
  }
})

defineEmits(['update:searchUser'])
</script>

<template>
  <header class="header">
    <div class="header-left">
      <img alt="Vue logo" class="logo" src="../assets/logo.svg" width="40" height="40" />
      <span class="platform-title">法律援助平台</span>
    </div>
    <div class="header-right">
      <el-input
        :model-value="searchUser"
        @update:model-value="$emit('update:searchUser', $event)"
        placeholder="搜索用户..."
        class="search-input"
        size="small"
      >
        <template #prefix>
          <span>🔍</span>
        </template>
      </el-input>
      <template v-if="isLogin">
        <el-dropdown @command="handleDropdown" trigger="hover">
          <span class="user-dropdown-trigger">
            <img :src="avatar" class="avatar" alt="头像" />
            <span class="username">{{ realname || username }}</span>
            <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人主页</el-dropdown-item>
              <el-dropdown-item command="settings">账号设置</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <template v-else>
        <el-button type="primary" size="small" @click="goLogin">登录</el-button>
      </template>
    </div>
  </header>
</template>

<style scoped>
.header {
  position: fixed;
  height: 64px;
  background: #2d8cf0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  flex-shrink: 0;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  margin-right: 14px;
}

.platform-title {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-input {
  width: 200px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.username {
  margin-right: 8px;
  color: #fff;
  font-weight: bold;
}

.user-dropdown-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 20px;
  padding: 2px 8px;
  transition: border-color 0.2s;
}
.user-dropdown-trigger:hover {
  border-color: #27ae60;
}

.dropdown-arrow {
  margin-left: 2px;
  font-size: 16px;
  color: #fff;
  transition: color 0.2s;
}
.user-dropdown-trigger:hover .dropdown-arrow {
  color: #27ae60;
}

@media (max-width: 768px) {
  .header {
    padding: 0 16px;
  }
  
  .header-right {
    gap: 8px;
  }
  
  .search-input {
    width: 150px;
  }
}
</style> 